iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0

來輕鬆聊聊

終於來到基礎CSS的最後一篇,這次要分享的是CSS的變量。
想像一個情境,你正在負責一個網頁的視覺設計,而你需要在許多地方用上同樣的顏色(如:暗紅色DarkRed)。通常在設定顏色時,都必須輸入正確的英文名稱/16進位數字/rgba,這並不是方便的做法,而且可能會忘記如何表示。
因此,CSS提供了一個方便的方法,可將常用的屬性值設定為自定義變量的值,需要使用時,在函數中放入變量名稱,即可得到設定的屬性值。這個做法不僅能避免開發中途忘記屬性值的名稱,若將變量名稱設定簡短一些,也能增進開發速度。


CSS變量

  • 自定義一個CSS變量的格式為--變量名稱: 屬性值;
  • 使用變量的格式為屬性: var(--變量名稱);,亦即var(--變量名稱) = 屬性值

範例

<!-- HTML -->
<p>我是酒紅色</p>

<div id="wine-box"></div>
<!-- CSS -->
:root {
  --title: 25px;
  --wine: #8b0000;
}
p {
  font-size: var(--title);
  color: var(--wine);
}
div {
  height: 100px;
  weight: 200px;
  background: var(--wine);
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210907/20141326xfssU6SiZn.png

繼承、作用域、優先度

  • HTML為巢狀結構,內層會繼承外層所定義的屬性值,包含變量。
  • 通常會將變量定義在:root這個偽類別中。可以將其視為最外層、作用域最大,較不會受到影響。
  • 變量和一般屬性值相同,也有優先順序的差別。

範例

<!-- HTML -->
<p>今天天氣很好</p>
<h3>明天不會下雨</h3>
<!-- CSS -->
:root {
  --color: blue;
}
p {
  --color: gray;
  color: var(--color);
}
h3 {
  color: var(--color);
}

顯示效果如下

https://ithelp.ithome.com.tw/upload/images/20210907/20141326Kuz3lOq2Ay.png

默認值、兼容性

  • 使用變量時,若不確定是否有定義變量或變量可能意外有誤時,可以在後方加上一個默認值,避免出錯,例:var(--SB, skyblue)
  • 由於瀏覽器種類眾多,不同裝置的瀏覽器版本又可能有所不同,為避免不支援CSS變量,可以在使用變量的前方加上原有的屬性值,增加兼容性。

範例

:root {
  --title: darkgray;
}
h1 {
  color: darkgray; // 兼容性
  color: var(--title, darkgray); // 逗號後方為默認值
}

基礎的部分到今天分享完畢,接下來有更進階的內容,有任何問題也歡迎在下方與大家分享討論哦!

內容來源:
freeCodeCamp|CodePen


上一篇
CSS基礎介紹(2)
下一篇
視覺設計(1)
系列文
從freeCodeCamp進入前端宇宙9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言